<template>
  <div class="app-container">

    <el-form :inline="true" :model="queryParams" class="demo-form-inline">

      <el-form-item label="发货单号">
        <el-input v-model="queryParams.code" placeholder="发货单号"></el-input>
      </el-form-item>

      <el-form-item label="书号">
        <el-input v-model="queryParams.bookcode" placeholder="书号"></el-input>
      </el-form-item>

      <el-form-item label="生产单号">
        <el-input v-model="queryParams.produceno" placeholder="生产单号"></el-input>
      </el-form-item>

      <el-form-item label="产品名称">
        <el-input v-model="queryParams.productname" placeholder="产品名称"></el-input>
      </el-form-item>

      <el-form-item label="创建人">
        <el-input v-model="queryParams.createby" placeholder="创建人"></el-input>
      </el-form-item>

      <el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>

      </el-form-item>
    </el-form>

    <el-table v-loading="loading" border :data="postList" height="900">
          <el-table-column label="序号" type="index" align="center" />
      <el-table-column
          label="发货单编码"
          min-width="200"
          align="center"
          prop="code"
      >
        <template v-slot="{ row }">
          <el-button type="primary" @click="handleView(row)" text>{{
              row.code
            }}</el-button>
        </template>
      </el-table-column>

          <el-table-column label="书号" prop="bookcode"   align="center" />

      <el-table-column
          label="生产单编码"
          min-width="200"
          align="center"
          :show-overflow-tooltip="true"
          prop="produceno"
      >

        <template v-slot="{ row }">
          <el-button
              type="primary"
              @click="handleViewProduce(row)"
              link
          >
            {{ row.produceno }}
          </el-button>
        </template>
      </el-table-column>

          <el-table-column label="产品名称" prop="productname"  width="300"  align="center" />
          <el-table-column label="订单数量" prop="ordercount"   align="center" />
          <el-table-column label="发货数量" prop="quantity"   align="center" />
          <el-table-column label="数量" prop="quantity"   align="center" />
          <el-table-column label="每包数量" prop="packinnum"   align="center" />
          <el-table-column label="包数" prop="packnum"   align="center" />
          <el-table-column label="零数" prop="zeronum"   align="center" />
      <el-table-column label="创建人" prop="createby"   align="center" />


    </el-table>

    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />


  </div>

</template>

<script setup name="Shippingdetails">
import { ref, onMounted } from "vue";
import { getdeliverydetailsList } from "@/api/production/invoice.js";
import { downLoadBlob } from "@/utils/ruoyi";// 编号改成序列号 纸张编号 印刷编号
const router = useRouter();
const queryParams = ref({
  pageNum: 1,
  pageSize: 20,
  code: undefined,
  bookcode: undefined,
  produceno: undefined,
  productname: undefined,
  createby: undefined
});

const postList = ref([]);
const total = ref(0);
const loading = ref(true);

// 获取列表
const getList = async () => {
  try {
    const response = await getdeliverydetailsList(queryParams.value);
    postList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  } catch (error) {
    console.error(error);
    // 处理错误逻辑
  }
};
// 在组件挂载后获取列表
onMounted(getList);

// 搜索按钮操作
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};


/** 重置按钮操作 */
function resetQuery() {
  queryParams.value.code = undefined;
  queryParams.value.bookcode = undefined;
  queryParams.value.produceno = undefined;
  queryParams.value.productname = undefined;
  queryParams.value.createby = undefined;
  handleQuery()
}


// 查看发货单明细
const handleView = (row) => {
  router.push({
    path: "/production/invoice/invoiceDetails",
    query: {
      id: row.id,
      info: true,
    },
  });
};



//   // 查看生产单明细
const handleViewProduce = (row) => {
  const produceId = row.produceid;
  const produceNo = row.produceno;
  if(produceNo.indexOf('FM') > -1){
    router.push({
      path: "/production/cover/coverDetails",
      query: {
        id: produceId,
        info: true,
        moduleCode: "Shippingdetails",
      },
    });
  }else{
    router.push({
      path: "/production/text/textDetails",
      query: {
        id: produceId,
        info: true,
        moduleCode: "Shippingdetails",
      },
    });
  }
};

</script>

<style lang="scss" scoped>
.operation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 18px;
}
</style>
